/**
 * Created by lee_mxue on 17/3/6.
 */
import React, {Component, PropTypes} from "react";
import ReactDOM from "react-dom";
import AJAX from "../../lib/ajax";
import InfiniteScroll from "react-infinite-scroller";
import weixinShare from "../../lib/weixinShare";
import { addErrorListener } from "../../lib/handleError"
require('../../lib/rem')
require('../../styles/common.less');
require('./AccountDetail.less')
require('../../styles/lux.less')
const IconBlock = require('../MyPackage/components/IconBlock');


class AccountDetail extends Component {
    constructor(props) {
        super(props);
        this.loadMoreData = this.loadMoreData.bind(this);   //加载更多
        this.getList = this.getList.bind(this);   //获取列表
        this.state = {
            isReady: false,     //是否可以加载页面
            current: 1, //当前页码
            bill_count: 0,  //列表总数
            bill_list: [],  //列表
            loadCount:1,    //加载次数
        }
    }

    componentWillMount() {
        addErrorListener()()
        weixinShare.hideAll()
    }

    componentDidMount() {
        AJAX.appendBaiduAnalysis()

        //获取用户交易明细列表
        this.getList();
    }

    //获取列表
    getList(current = 1){
        var _this = this;
        this.setState({
            current: current,
        })
        AJAX.request("bill_list", {page: current, psize:10}, (data) => {
            if (data.code === 0) {
                var my_bill_list = {
                    count: data.body.count,
                    list: data.body.list,
                }
                _this.setState({
                    isReady: true,     //是否可以加载页面
                    bill_count: my_bill_list.count,
                    bill_list: _this.state.bill_list.concat(my_bill_list.list),
                    loadCount: Math.ceil(my_bill_list.count / 10)    //获取总页数（psize == 10）
                })
            }

        })
    }


    //加载更多
    loadMoreData(current) {
        var _current = current + 1;
        var _this = this;
        //判断加载次数
        if (this.state.loadCount) {
            if (_current < _this.state.loadCount || _current == _this.state.loadCount) {
                // alert("111！！！")
                _this.getList(_current)
            } else {
                // alert("没有数据了！！！")
            }
        }
    }

    render() {
        const loader = <div className="loader"></div>

        return (
            this.state.isReady &&
            <div className="main">
                {this.state.bill_count == 0 && <IconBlock type="NO-DATA" />}
                <InfiniteScroll
                    pageStart={0}
                    threshold={5}
                    loadMore={this.loadMoreData.bind(this, this.state.current)}
                    hasMore={true}
                    loader={loader}
                >
                    <ul className="approve-list-ul">
                        {this.state.bill_list.map(item => {
                            return(
                                <li className="list_item">
                                    <div className="item_left">
                                        <p>{item.source_desc}  {item.desc}</p>
                                        <p>{item.create_time}</p>
                                    </div>
                                    <div className={`item_right ${(item.amount > 0 )?  +'': '' + 'textYellow' }`}>{` ${(item.amount > 0 ) ?  "+" : '' }`}{(item.amount/100).toFixed(2)}</div>
                                </li>
                            )
                        })}
                    </ul>

                </InfiniteScroll>
            </div>
        )
    }
}
ReactDOM.render(<AccountDetail />, document.getElementById('app'))
if (module.hot) {
    module.hot.accept();
}

